<template>
  <div>
    <CustomDialog
      title="新增/编辑会员企业"
      width="900px"
      :visible.sync="isShowDialog"
      @closed="handleCloseDialog"
    >
      <el-form
        ref="ruleForm"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <div class="h1 mt-0">基本信息</div>
        <!-- 企业名称 -->
        <el-form-item label="" prop="name" class="row-left">
          <template #label>
            <div class="form-label required">企业名称</div>
          </template>

          <el-select
            v-model="form.name"
            class="w-full"
            filterable
            remote
            allow-create
            placeholder="请输入企业名称"
            :remote-method="remoteMethod"
            :loading="nameLoading"
          >
            <el-option
              v-for="item in interpriseNameOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--统一社会信用代码 -->
        <el-form-item label="" prop="uniCode" class="row-right">
          <template #label>
            <div class="form-label required">信用代码</div>
          </template>
          <el-input v-model="form.uniCode" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 业务联系人 -->
        <el-form-item label="" prop="contacts" class="row-left">
          <template #label>
            <div class="form-label required">业务联系人</div>
          </template>
          <el-input v-model="form.contacts" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 联系电话 -->
        <el-form-item label="" prop="phone" class="row-right">
          <template #label>
            <div class="form-label required">联系电话</div>
          </template>
          <el-input v-model="form.phone" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 企业地址 -->
        <el-form-item label="" prop="addrs" class="row-left">
          <template #label>
            <div class="">企业地址</div>
          </template>
          <el-input v-model="form.addrs" placeholder="点击右侧按钮在地图上选点">
            <i
              slot="suffix"
              class="el-icon-location-outline text-2xl pr-1 pt-[4px] cursor-pointer"
              @click="isShowMap = true"
            />
          </el-input>
        </el-form-item>
        <!-- 企业网址 -->
        <el-form-item label="" prop="website" class="row-right">
          <template #label>
            <div class="form-label">企业网址</div>
          </template>
          <el-input v-model="form.website" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 行业分类 -->
        <el-form-item label="" prop="industry" class="row-left">
          <template #label>
            <div class="form-label">行业分类</div>
          </template>
          <el-cascader
            id="industry"
            ref="industry"
            v-model="form.industry"
            class="w-full"
            clearable
            filterable
            placeholder="行业，支持模糊搜索、选择"
            :options="industryTree"
            :props="{
              checkStrictly: true,
              multiple: true,
              value: 'code',
              label: 'name',
            }"
          ></el-cascader>
        </el-form-item>
        <!-- 人员规模 -->
        <el-form-item label="" prop="staffSize" class="row-right">
          <template #label>
            <div class="form-label">人员规模</div>
          </template>
          <el-input v-model="form.staffSize" type="number" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 参保人数 -->
        <el-form-item label="" prop="insuredCount" class="row-left mb-4">
          <template #label>
            <div class="form-label">参保人数</div>
          </template>
          <el-input v-model="form.insuredCount" type="number" placeholder="请输入"></el-input>
        </el-form-item>
        <!--企业简介 -->
        <el-form-item label="" prop="businessScope" class="row-all mb-4">
          <template #label>
            <div class="form-label required">企业简介</div>
          </template>
          <el-input
            v-model="form.businessScope"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 多媒体资料 -->
        <div class="h1">工商信息</div>

        <!-- 法定代表人 -->
        <el-form-item label="" prop="key1" class="row-left">
          <template #label>
            <div class="form-label">法定代表人</div>
          </template>
          <el-input v-model="form.key1" disabled></el-input>
        </el-form-item>
        <!-- 成立时间 -->
        <el-form-item label="" prop="key2" class="row-right">
          <template #label>
            <div class="form-label">成立时间</div>
          </template>
          <el-input v-model="form.key2" disabled></el-input>
        </el-form-item>
        <!-- 注册资本 -->
        <el-form-item label="" prop="key1" class="row-left">
          <template #label>
            <div class="form-label">注册资本</div>
          </template>
          <el-input v-model="form.key1" disabled></el-input>
        </el-form-item>
        <!-- 经营状态 -->
        <el-form-item label="" prop="key2" class="row-right">
          <template #label>
            <div class="form-label">经营状态</div>
          </template>
          <el-input v-model="form.key2" disabled></el-input>
        </el-form-item>
        <!-- 实缴资本 -->
        <el-form-item label="" prop="key1" class="row-left">
          <template #label>
            <div class="form-label">实缴资本</div>
          </template>
          <el-input v-model="form.key1" disabled></el-input>
        </el-form-item>
        <!-- 工商注册号 -->
        <el-form-item label="" prop="key2" class="row-right">
          <template #label>
            <div class="form-label">工商注册号</div>
          </template>
          <el-input v-model="form.key2" disabled></el-input>
        </el-form-item>
        <!-- 组织机构代码 -->
        <el-form-item label="" prop="key1" class="row-left">
          <template #label>
            <div class="form-label">组织机构代码</div>
          </template>
          <el-input v-model="form.key1" disabled></el-input>
        </el-form-item>
        <!-- 纳税人识别号 -->
        <el-form-item label="" prop="key2" class="row-right">
          <template #label>
            <div class="form-label">纳税人识别号</div>
          </template>
          <el-input v-model="form.key2" disabled></el-input>
        </el-form-item>
        <!-- 纳税人资质 -->
        <el-form-item label="" prop="key1" class="row-left">
          <template #label>
            <div class="form-label">纳税人资质</div>
          </template>
          <el-input v-model="form.key1" disabled></el-input>
        </el-form-item>
        <!-- 企业类型 -->
        <el-form-item label="" prop="key2" class="row-right">
          <template #label>
            <div class="form-label">企业类型</div>
          </template>
          <el-input v-model="form.key2" disabled></el-input>
        </el-form-item>
        <!-- 登记机关 -->
        <el-form-item label="" prop="key1" class="row-left">
          <template #label>
            <div class="form-label">登记机关</div>
          </template>
          <el-input v-model="form.key1" disabled></el-input>
        </el-form-item>
        <!-- 核准日期 -->
        <el-form-item label="" prop="key2" class="row-right">
          <template #label>
            <div class="form-label">核准日期</div>
          </template>
          <el-input v-model="form.key2" disabled></el-input>
        </el-form-item>
        <!--经营范围 -->
        <el-form-item label="" prop="key3" class="row-all mb-4">
          <template #label>
            <div class="form-label">经营范围</div>
          </template>
          <el-input
            v-model="form.key3"
            disabled
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button class="rounded-content-wrap" type="primary" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>

    <PositionPicker
      :visible.sync="isShowMap"
      :position.sync="form.position"
      :addrs.sync="form.addrs"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomDialog from '@/components/admin/manage/carrier/common/CustomDialog/index.vue'
import PositionPicker from '@/components/admin/manage/carrier/common/CustomAMap/PositionPicker.vue'
import {
  projectTypeOptions,
  projectStatusOptions,
} from '@/components/admin/manage/carrier/common/dictionary'
import addEditMixin from '@/components/admin/manage/carrier/common/addEditMixin'
// import { pageList } from '@/api/commonInstance'
// import { DBNames } from '@/enum/dbName'
const treeKey = [{ key: 'industry', refName: 'industry' }]

export default Vue.extend({
  components: { CustomDialog, PositionPicker },
  mixins: [addEditMixin({ treeKey, templateName: 'B_CONSOLE_ENTERPRISE' })],
  data() {
    return {
      form: {
        name: '',
        uniCode: '',
        contacts: '',
        addrs: '',
        website: '',
        industry: '',
        staffSize: '',
        insuredCount: '',
        businessScope: '',
        //  name:'',
        //  name:'',
        //  name:'',
        //  name:'',
        //  name:'',
        //  name:'',
      },
      rules: {
        name: [
          { required: true, message: '请输入项目标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度为3~20个字符', trigger: 'blur' },
        ],
        type: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
        areaCovered: [{ required: true, message: '请输入占地面积', trigger: 'blur' }],
        investment: [{ required: true, message: '请输入拟投资额', trigger: 'blur' }],
        highlight: [{ required: true, message: '请输入项目亮点', trigger: 'blur' }],
        needs: [{ required: true, message: '请输入项目需求', trigger: 'blur' }],
      },
      projectTypeOptions,
      projectStatusOptions,
      // nameLoading: false,
    }
  },
  // methods: {
  //   async remoteMethod(query) {
  //     if (query.trim() !== '') {
  //       this.nameLoading = true
  //       const params = {
  //         conditions: { 'data.name': { $regex: query } },
  //         pageInfo: {
  //           pageNum: 1,
  //           pageSize: 10,
  //         },
  //         templateName: DBNames.B_CONSOLE_LAND, // 后期需要换成企业库表名
  //       }
  //       const { list } = await pageList(params)
  //       this.options = list.map((d) => ({ label: d.data.name, value: d.id, detail: d.data }))
  //       this.nameLoading = false
  //     } else {
  //       this.options = []
  //     }
  //   },
  // },
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
